<template>
  <section>
    
 <!-- 面包屑 -->
 <breadcrumbs></breadcrumbs>
    <div class="top-box">
      <div class="top-item"><img src="../../assets/images/leijiduihuanshangpin.png"
             alt=""
             class="top-icon">  
        <div class="right-item-box">
          <p><span class="fontTop">{{xianshidata.orderGoodsNumSum}}</span><br>
            <span class="fontText">累计兑换商品（个）</span>
          </p>
        </div>
      </div>
      <!-- <el-button type="primary" @click="addhouse">新增运营中心</el-button> -->
    </div>
    <!-- 查询条件 -->
    <el-form ref="searchForm"
             :model="searchForm"
             label-width="100px"
             inline
             class="demo-form-inline"
             size='small'
             style="border-bottom: 1px solid #f6f6f6;">
      <el-form-item label="商品名称"
                    prop="goodsName">
        <el-input v-model="searchForm.goodsName"
                  placeholder="请输入商品名称"></el-input>
      </el-form-item>
       <el-form-item>
        <el-button type="primary"
                   @click="search">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
      <el-form-item label="排序方式" prop="sortType">
          <el-select v-model="searchForm.sortType" placeholder="请选择排序方式" @change="paixun">
            <el-option label="时间排序" value="1"></el-option>
            <el-option label="兑换数量排序" value="2"></el-option>
          </el-select>
      </el-form-item>

     
    </el-form>
    <!-- <btns @exec="exec"></btns> -->
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">商品列表</div>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                row-key="dictId"
                border
                @selection-change="tableSelectionChange">
        
        <el-table-column label="序号" prop="index" type="index" width="100px"></el-table-column>
        <el-table-column prop="goodsName"
                         width="300"
                         label="商品名称">
        </el-table-column>
      
        <el-table-column prop="goodsIntegral"
                         width="300"
                         label="兑换积分">
        </el-table-column>

        <el-table-column prop="num"
                         width="300"
                         label="累计兑换数量">
        </el-table-column>

        <el-table-column prop="goodsStatus"
                         width="200"
                         label="状态">
          <template slot-scope="scope">
           <p v-if="scope.row.goodsStatus == 1">
              启用
            </p>
            <p v-if="scope.row.goodsStatus == 2">
              禁用
            </p>
          
          </template>
            
        </el-table-column>
         <el-table-column prop="addTime"
                         width="300"
                         label="添加时间">
        </el-table-column>

        <el-table-column prop="goodsStock"
                         width="300"
                         label="库存">
        </el-table-column>

       
    
        
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>


  </section>
</template>

<script>
import btns from '@/components/btns.vue';
import Editor from '@/components/edit';
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
    Editor,
    breadcrumbs,
  },
  data () {
    var telValidate = (rule, value, callback) => {

      if (value != null && value != '') {
        var tel = /^0\d{2,3}-?\d{7,8}$/;
        var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if (value.length == 11) {//手机号码
          if (phone.test(value)) {
            console.log(value);
            return true;
          }
        } else if (value.length == 13 && value.indexOf("-") != -1) {//电话号码
          if (tel.test(value)) {
            console.log(value);
            return true;
          }
        }
        callback('请输入正确的电话号码！');
      } else {
        callback();
      }
    };
    return {
      value:"",
     shangpindata:[],
      xianshidata:[],
      searchForm:{
        goodsName:"",
        sortType:"",
      },
        
      state:"",
      tableSelection: [],
      dialogEditFormVisible: false,
      tableData: [],
      editForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogCreateFormVisible: false,
      createForm: {},
      rules: {
        "goodsId": [
          { required: true, message: '请选择商品名称', trigger: 'blur' },
        ],
        "purchaseAllMoney": [
          { required: true, message: '请输入采购总金额', trigger: 'blur' },
        ],
        "purchaseNum": [
          { required: true, message: '请输入采购数量', trigger: 'blur' },
        ],
       "goodsName": [
          { required: true, message: '请选择商品名称', trigger: 'blur' },
        ],
       
        

      },
      formLabelWidth: '120px',
      addfile: '',
      importFileUrl: this.GLOBAL.imgBaseUrl,
    }
  },
  created () {
      this.xianshi();
    this.shangpinlist();
    this.getList();
    
    

  },
  methods: {
      paixun(){
          
          console.log("当前选择的排序为1："+this.searchForm.sortType)
          this.search();
          
      },
      
     shangpinlist(){
     
          this.$api.integral.huoqushangpinlist({
            
          }).then(d => {
            if (d.code == 200) {
              this.shangpindata = d.data;
            }
          })
        
     

       },
       xianshi(){
     
          this.$api.integral.fanhuixianshi({
            
          }).then(d => {
            if (d.code == 200) {
              this.xianshidata = d.data;
            }
          })
        
     

       },
      
      
    getList () {
      this.$api.integral.kucunlist({
        current:this.currentPage,
        size:this.pageSize,
        goodsName:this.searchForm.goodsName,
        sortType:this.searchForm.sortType
      }

      ).then(d => {
        if (d.code == 200) {
          this.tableData = d.data;
          this.total = d.totalCount;
        }
      })
    },
   
    

   
    search () {
      console.log("search")
       this.getList();
     },

    exec (fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },

     handleReset() {
        this.searchForm = {
            goodsName:"",
            title:"",
            endTime: "",
             addTime: "",
        }
      
      this.search();
    },
   tableSelectionChange(val) {
      this.tableSelection = val;
    },
    handleSizeChange(val) {
    this.pageSize = val;
    this.getList(this.currentPage, val);
    // eslint-disable-next-line no-console
    // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(val, this.pageSize);
      // eslint-disable-next-line no-console
      // console.log(`当前页: ${val}`);
    },

  }
}
</script>

<style lang="scss" scoped>
.fontText {
  font-size: 20px;
  
}

.fontTop {
  font-size: 40px;
}

.top-box {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.top-item {
  border: 1px rgb(189, 185, 185) solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 20px;

  .top-icon {
    width: 35%;
    height: 35%;
   
  }

  .right-item-box {
    text-align: center;
    margin-left: 20px;
  }
}
</style>